<template>
  <div>
    <el-dialog title="新增项目" :visible.sync="modalShow" width="60%" :before-close="modalClose" center="true">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类" prop="classification">
              <el-input v-model="ruleForm.classification" />
            </el-form-item>
            <el-form-item label="科室" prop="department">
              <el-input v-model="ruleForm.department" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model.number="ruleForm.name" />
            </el-form-item>
            <el-form-item label="拼音码" prop="code">
              <el-input v-model.number="ruleForm.code" />
            </el-form-item>
            <el-form-item label="次数" prop="number">
              <el-input-number v-model="ruleForm.number" class="number" controls-position="right" :min="1" :max="10" />
              <!-- <el-input v-model.number="ruleForm.number"></el-input> -->
            </el-form-item>
            <el-form-item label="描述" prop="describe">
              <el-input v-model.number="ruleForm.describe" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="项目耗材" name="second">
          <el-table
            :data="tableData"
            class="thear"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="名字"
              align="center"
            />
            <el-table-column
              prop="spec"
              label="规格"
              align="center"
            />
            <el-table-column
              prop="unit"
              label="单位"
              align="center"
            />
            <el-table-column
              :prop="tableData[0].num"
              label="最大可领取数量"
              align="center"
            >
              <el-input-number v-model="tableData[0].num" controls-position="right" :min="1" :max="10" @change="handleChange" />
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
            >
              <template>
                <el-button size="small" type="warning" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            width="60%"
            title="新增耗材"
            center="true"
            :visible.sync="innerVisible"
            append-to-body
          >
            <!-- stretch="true" -->
            <el-tabs v-model="activeNames">
              <el-tab-pane label="药品" name="first" />
              <el-tab-pane label="物料" name="second" />
              <div class="outline">
                <el-tree :data="datas" :props="defaultProps" @node-click="handleNodeClick" />
                <el-table
                  :data="tableDatas"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    prop="date"
                    label="编号"
                  />
                  <el-table-column
                    prop="name"
                    label="名称"
                  />
                  <el-table-column
                    prop="address"
                    label="规格"
                  />
                  <el-table-column
                    prop="address"
                    label="单位"
                  />
                  <el-table-column
                    prop="address"
                    label="描述"
                  />
                  <el-table-column
                    prop="address"
                    label="剩余库存"
                  />
                  <el-table-column
                    label="操作"
                  >
                    <el-checkbox v-model="checked" @click="handleChanges" />
                  </el-table-column>
                </el-table>
              </div>
            </el-tabs>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              size="small"
              clearable
            />
            <el-button>搜索</el-button>
          </el-dialog>
          <div class="add">
            <el-button type="primary" plain size="medium" @click="innerVisible = true">新增耗材</el-button>
          </div>
          领取额外耗材
          <el-radio v-model="radio" label="1">允许</el-radio>
          <el-radio v-model="radio" label="2">不允许</el-radio>
          <div>
            <el-button type="primary" class="submit" @click="submitForm1(tableData)">提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      modalShow: false,
      ruleForm: {
        classification: "", // 分类
        department: "", // 科室
        name: "", // 名称
        code: "", // 拼音码
        number: "", // 次数
        describe: "", // 描述
      },
      innerVisible: false,
      rules: {
        classification: [// 分类
          { message: '请至少选择一个分类', trigger: 'blur', required: true },
        ],
        department: [// 科室
          { message: '请至少选择一个科室', trigger: 'blur', required: true },
        ],
        name: [// 名称
          { message: '请填写名称', trigger: 'blur', required: true },
        ],
        code: [// 拼音码
          { trigger: 'blur' },
        ],
        number: [// 次数
          { message: '请选择次数', trigger: 'blur', required: true },
        ],
        describe: [// 描述
          { trigger: 'blur' },
        ],
      },
      activeName: 'first',
      activeNames: 'first',
      input: '',
      tableData: [{
        name: '物料1',
        spec: 'xx',
        unit: 'xxx',
        num: 1,
      }],
      radio: '1',
      datas: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1',
          }],
        }],
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1',
          }],
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1',
          }],
        }],
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1',
          }],
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1',
          }],
        }],
      }],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      tableDatas: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }],
      checked: true,
    };
  },
  created() {
    console.log(9999);
    this.activeName = 'first';
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleChange(value) {
      console.log(value);
    },
    handleChanges() {
      console.log(999);
      this.checked = !this.checked;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    init() {
      this.modalShow = true;
    },
    modalClose() {
      this.modalShow = false;
    },
    submitForm(formName) { // 基本信息中的提交按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitForm1(formName) { // 耗材信息中的提交按钮
      console.log(formName, this.radio);
    },
  },
};
</script>

<style scoped lang="scss">
    .add{
        margin: 30px 0 60px;
    }
    .submit{
        width: 60%;
        margin-left: 20%;
        border-radius: 10px;
        margin-top: 80px;
    }
    .thear{
        border: 1px solid rgb(141, 138, 138);
    }
    /* .number{
        width: 100%;
    } */
    /* .el-input__inner{
        margin-left: 30px;
    } */
    .outline{
        display: flex;
        el-input{
            width: 40%;
        }
    }
    .el-tree{
        width: 30%;
    }
</style>
